<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.表单标签 form action属性表单提交到服务器地址-->
    <form action="test.php">
        <!-- 表单元素 -->
         <!-- 明文输入框 -->
         用户：<input type="text" name="用户名">
         <!-- 暗文输入框 -->
         密码：<input type="password" name="密码"><br>
        <!-- 单选按钮 如果想要单选按钮出现互斥效果得加到同一个选项组 -->
         性别：
         男：<input type="radio" name="gender" value="male">
         女：<input type="radio" name="gender" value="female"><br>
        <!-- 复选框 -->
         爱好：
         篮球：<input type="checkbox" name="hobbies" value="basketball">
         足球：<input type="checkbox" name="hobbies" value="football">
         游泳：<input type="checkbox" name="hobbies" value="swimming">
        <!-- hr分割线 -->
        <hr>
        <!-- 下拉框 -->
          <!-- 对下拉选项进行分组 shift+alt+f格式化文档 -->
         <select name="city">
            <optgroup label="一线城市">
                <option value="taiyuan">太原</option>
                <option value="datang">大同</option>
                <option value="jinzhong">晋中</option>
            </optgroup>
            <optgroup label="二线城市">
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="guangzhou">广州</option>
            </optgroup>
         </select>
        <!-- 多行文本框 cols 100列 rows 100行 -->
         <textarea cols="30" rows="10"></textarea>
        <!-- 日期选择器 -->
         <input type="date">
        <!-- 时间日期选择器 -->
         <input type="datetime-local">
    </form>
</body>
</html>